<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <title>Bootstrap徽章和巨幕案例</title>
</head>

<body>
    <div class="container">
        <div class="jumbotron">
            <h1>Hello,world</h1>
            <p>欢迎来到哦，提升自己，丰富自己</p>
            <p><a class="btn btn-info btn-lg" href="#" role="button">Learn more</a></p>
        </div>

    </div>

    <div class="container">
        <a href="#">短信消息
            <span class="badge">30</span>
        </a>
        <button class="btn btn-success" type="button">Message
            <span class="badge">100</span>
        </button>
    </div>
    <ul class="nav nav-pills" role="rablist">
        <li role="presentation" class="active">
            <a href="#">Home
                <span class="badge">10</span>
            </a>
        </li>
        <li role="presentation">
            <a href="#">Profile
                <span class="badge">100</span>
            </a>
        </li>
        <li role="presentation">
            <a href="#">Message
                <span class="badge">5</span>
            </a>
        </li>
    </ul>


</body>

</html>